<template>
  <div>
    <el-dialog v-model="visible" :show-close="false" width="700">
      <template #header="{ close, titleId, titleClass }">
        <div class="my-header">
          <h4 :id="titleId" :class="titleClass">
            {{ formData.id ? '编辑' : '创建' }}地址
          </h4>
        </div>
      </template>

      <div>
        <el-form :model="formData" label-width="120px" ref="elFormRef">
<!--          <el-form-item label="名称" prop="username">-->
<!--            <el-input v-model="formData.username" size="large" placeholder="请输入名称" />-->
<!--          </el-form-item>-->

<!--          <el-form-item label="区域" prop="shopId">-->
<!--            <SelectArea v-model:province="formData.province" v-model:city="formData.city"-->
<!--              v-model:county="formData.county" />-->
<!--          </el-form-item>-->

          <el-form-item label="详细地址" prop="address">
            <el-input v-model="formData.address" size="large" placeholder="请输入详细地址" />
          </el-form-item>

<!--          <el-form-item label="联系电话" prop="phone">-->
<!--            <el-input v-model="formData.phone" size="large" placeholder="请输入联系电话" />-->
<!--          </el-form-item>-->
        </el-form>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="close">关闭</el-button>

          <el-button type="primary" @click="handleSubmit">
            保存
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang='ts' setup>
import { ref, watch, onMounted, nextTick, computed, reactive } from 'vue'
import { GetAddressAddAndEditApi } from '@/api/index'
import { ElMessage } from 'element-plus'
import Select from '@/components/admin/Select.vue'
import SelectArea from '@/components/admin/SelectArea.vue'
import Upload from '@/components/Upload.vue'

const props = defineProps({
  productStatus: {
    type: Object,
    default: () => ({})
  },
})

const visible = ref(false)

const elFormRef = ref(null)


const isShowShopId = ref(false)

// 表单数据
const formData = reactive({
  province: '',
  city: '',
  county: '',
  username: '',
  address: '',
  addressId: '',
  phone: '',
  method: 'add'
})

const open = (config, type = 'add') => {
  Object.assign(formData, config.data)

  formData.method = type

  formData.addressId = formData.id

  visible.value = true
}

const close = () => {
  elFormRef.value.resetFields()

  visible.value = false
}

const handleSubmit = async () => {
  try {
    const res = await GetAddressAddAndEditApi(formData)

    emit('reload')

    close()
  } catch (error) {

  }
}

// 暴露方法给父组件
defineExpose({
  open
});

const emit = defineEmits(['reload'])

onMounted(() => {
  // open()
})
</script>

<style lang='scss' scoped></style>
